<template>
  <dl :class="data.id" @mouseover="over">
    <dt>{{ data.title }}</dt>
    <dd
      :class="{ active: kind == item.tab }"
      :data-type="item.tab"
      v-for="(item, i) in data.navTitle"
      :key="i"
    >
      {{ item.adress }}
    </dd>
    <dd class="all">
      <router-link to="/"
        >全部<i class="iconfont icon-youjiantou-copy"></i
      ></router-link>
    </dd>
  </dl>
</template>

<script>
export default {
  data() {
    return {
      kind: " ",
    };
  },
  props: ["data"],
  methods: {
    over(e) {
      const dom = e.target;
      const tagName = dom.tagName.toLowerCase();
      if (tagName !== "dd") {
        return true;
      }
      this.kind = dom.getAttribute("data-type");
      // 动态获取数据  ajax请求
    },
  },
};
</script>

<style lang="less" scoped>
dl {
  position: relative;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  line-height: 44px;
  display: flex;
  font-size: 14px;
  color: #fff;
  border-radius: 5px 5px 0 0;
  &.movies {
    background: linear-gradient(
        to right,
        rgb(250, 60, 104) 2%,
        rgb(254, 70, 77) 97%
      )
      rgb(250, 60, 104);
  }
  &.hotel {
    background: linear-gradient(
        to right,
        rgb(243, 182, 74) 2%,
        rgb(242, 197, 69) 97%
      )
      rgb(243, 182, 74);
  }
  &.m-like {
    background: linear-gradient(
        to right,
        rgb(88, 174, 221) 2%,
        rgb(66, 191, 205) 97%
      )
      rgb(88, 174, 221);
  }
  dt {
    font-size: 18px;
    margin-left: 13px;
    margin-right: 10px;
    padding: 0 5px;
    cursor: default;
  }
  dd {
    padding: 0 5px;
    position: relative;
    cursor: pointer;
    &.active::after {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      content: "";
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-bottom-color: #fff;
    }
    &.all {
      position: absolute;
      right: 12px;
      i {
        font-size: 12px;
      }
    }
  }
}
</style>